<template>
    <transition name="slide">
        <div class="model" v-show="showModel">
            <div class="mask"></div>
                <div class="model-dialog">
                    <div class="model-header">
                        <span>{{title}}</span>
                        <a href="javascript:;" class="icon-close" @click="$emit('cancel')"></a>
                </div>
                <div class="model-body">
                    <slot name="body">

                    </slot>
                </div>
                <div class="model-footer">
                    <a href="javascript:;" class="btn-register" v-if='btnType==1' @click="$emit('submit')">{{sureText}}</a>
                    <a href="javascript:;" class="btn-register" v-if='btnType==2' @click="$emit('cancel')">{{cancelText}}</a>
                    <div class="btn-group" v-if='btnType>=3'>
                        <a href="javascript:;" class="btn-register" @click="$emit('submit')">{{sureText}}</a>
                        <a href="javascript:;" class="btn-register" @click="$emit('cancel')">{{cancelText}}</a>
                    </div>
                </div>
            </div>
        </div>
    </transition>
    
</template>

<script>
export default {
    name:'model',
    props:{
        // small middle big form
        modelType:{
            type:String,
            default:'form'
        },
        title:String,
        // 1：确认按钮 2：取消按钮 3：both
        btnType:String,
        sureText:{
            type:String,
            default:'确定'
        },
        cancelText:{
            type:String,
            default:'取消'
        },
        showModel:Boolean,

    }
}
</script>

<style lang="scss">

</style>